<template>

  <div>
    <el-breadcrumb separator="/" style="padding-bottom:20px;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>功能管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-container direction="vertical">

      <fm-grid ref="grid" url="/api/v1/sys/func" method="get" :params="['kw']">

        <template slot-scope="{rows,loading,search}">

          <div class="filter-container">
            <el-input style="width: 200px;" size="small" v-model="query.kw" class="filter-item"
                      placeholder="请输入姓名或用户名"/>

            <el-button class="filter-item" size="small" style="margin-left: 10px;" @click="search(query,1)"
                       type="primary" icon="search">搜索
            </el-button>
            <div style="float:right;">
              <el-button class="filter-item" v-if="$auth.contains('func-scan')" :loading="funcLoading"
                        style="margin-right: 20px;" :disabled="funcLoading" @click="scan" type="text" icon="edit">扫描
              </el-button>
            </div>

          </div>

          <el-table
            :data="rows"
            stripe
            v-loading="loading"
            style="width: 100%;padding-bottom:20px;border-bottom:none;">
            <el-table-column
              prop="uid"
              label="编号"
              width="120">
            </el-table-column>
            <el-table-column
              prop="parentUid"
              label="上级编号"
              width="120">
            </el-table-column>
            <el-table-column
              prop="key"
              label="授权码"
              width="180">
            </el-table-column>
            <el-table-column
              prop="project"
              label="工程"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="fullName"
              label="全名">
            </el-table-column>
          </el-table>
        </template>

      </fm-grid>
    </el-container>
  </div>

</template>

<script>
import FmGrid from "@/components/grid/FmGrid";
import axios from "@/util/axios";

export default {
  components: { FmGrid },

  mounted() {
    this.$nextTick(() => {
      const { kw } = this.$route.query;
      this.query = { ...this.query, kw };
    });
  },

  data() {
    return {
      query: {},
      funcLoading: false
    };
  },

  methods: {
    scan() {
      this.funcLoading = true;
      axios.get("/api/v1/sys/func/scan").finally(() => {
        this.$refs.grid.search();
        this.funcLoading = false;
      });
    }
  }
};
</script>

